// 变量 : 是数据的容器 , 这里的变量可以存储任何sass之中的数据; 
@use "sass:math";
@import "./var";
body{
      background-color: $bg-color;
      font-size:$font_size;
}

div{
      float: left;
      margin-left: 20px;
}


#box2{
      width: 10rem;
      height: 10rem;
      // background-color: lighten($bg-color, 20 );
      background-color: darken($bg-color, 20 );
}

// sass 的模块化; 
// - 把所有的延时部分全部进行拆分; 
// - import "路径";

@import "./box.scss";

// - 模块代码的重复使用 ; 
// - 正常命名会把模块scss直接编译到css文件之中; 
// - 我们在文件名之前加 _ 来区分模块和常规的业务文件; 
 

// - 开发规范 : 
// - 所有的变量应该统一放置在一个独立的scss模块之中; 

// mixin : 对部分常用css代码进行封装; 

#box::after{
      content: "";
      display: block;
      clear: both;
}

// 我们可以对任意代码进行封装

@import "./mixin";

#box2::after{
      @include clear();
}

.btn{
     @include btn();
}
.btn-large{
      @include btn(10px , 30px);
}
.btn-small{
      @include btn(1px , 3px );
}
// px转换rem的封装; 
@function c( $px : 10px ){
      @return math.div( $px , $font_size) * 1rem;
}

.pox {
      width: c(100px);
      height:100px;
      background-color: lightsteelblue;
      float: left;
      margin-left: 30px;
}

.pox-small{
      @extend .pox;
      width: 50px;
      height: 50px;
}

.pox-large{
      @extend .pox;
      width: 200px;
      height: 200px;
      @include btn;
}

//思考 :  btn 样式模块用 mixin封装合适还是用 extend 继承实现更好; 

// scss嵌套结构 
#list {
      width: 100%;
      background-color:blanchedalmond;
      float: left;

      li{   
            width: 50%;
            text-align: center;

            span{
                  color: #f10;
            }

            strong{
                  color: yellowgreen;
            }

            &:hover{
                  background-color: sandybrown;
            }
      }

      @at-root .active{
            background-color: hotpink;
      }
}

@function hahah( $arg ){
      @return $arg;
}


.pox::after{
      content: hahah("你好");
      display: block;
}

// // px转换rem的封装; 
// @function a( $px ){
//       @return $px / $font_size * 1rem;
// }

